<template>
  <div class="album">
    <div class="hot_box">
      <div class="img-box">
        <img src="~@/assets/img/singerdetail/top50.jpg" alt="">
      </div>
      <div>
        <div class="album-title">
          <span>热门50首</span>
          <span @click="playAll">播放全部</span>
        </div>
        <table id="table">
          <tr
            class="detail-info"
            :class="{ active: currentIndex === index }"
            v-for="(item, index) in topSongs"
            :key="index"
            @dblclick="addSong(index)"
            @click="trClick(index)"
          >
            <td class="other">
              <span>{{ index < 9 ? "0" + (index + 1) : index + 1 }}</span>
              <img
                @click="btnClick(index)"
                v-show="spanIndex.indexOf(index) === -1"
                src="~@/assets/img/songlistdetail/collect2.svg"
                alt=""
              />
              <img
                @click="btnClick(index)"
                v-show="spanIndex.indexOf(index) !== -1"
                src="~@/assets/img/songlistdetail/collect3.svg"
                alt=""
              />
              <img src="~@/assets/img/songlistdetail/download2.svg" alt="" />
            </td>
            <td class="title"
                :class="{dbActive: $store.state.playContent.playId === item.id}">
              {{ item.name }}
            </td>
            <td class="time">{{item.dt | filterTime}}</td>
          </tr>
        </table>
      </div>
    </div>
    <SingerAlbumItem
      v-for="(item, index) in albums"
      :key="index"
      :album-id="item.id">
    </SingerAlbumItem>
  </div>

</template>

<script>
  import SingerAlbumItem from "./SingerAlbumItem";
  import { home } from "@/network/home";
  import { format } from '@/components/common/utilis'


  export default {
    name: "SingerAlbum",
    components:{
      SingerAlbumItem,
    },
    data(){
      return {
        id:this.$route.params.id, //歌手id
        topSongs:[],    //热门50曲
        albums:[],      //歌手专辑(传里面的id给子组件)
        songlist:[],//‘播放全部’歌单列表
        spanIndex: [], //保存歌曲的索引（用于点赞和取消点赞）
        currentIndex: "", //单击相应歌曲背景颜色改变
      }
    },
    created() {
      //请求歌手热门50曲
      this.getSingerTopSongs(this.id)
      //请求歌手专辑
      this.getSingerAlbum(this.id)
    },
    watch:{
      //监听歌手id是否变化，变化就更新数据
      '$route.params.id'(){
        //请求歌手热门50曲
        this.getSingerTopSongs(this.$route.params.id)
        //请求歌手专辑
        this.getSingerAlbum(this.$route.params.id)
      },
    },
    filters:{
      // 格式化歌曲时间
      filterTime(value){
        return format(value/1000)
      },
    },
    methods:{
      //点击按钮收藏歌曲，再点击取消收藏，可以多个同时点击的方法
      btnClick(index) {
        let result = this.spanIndex.indexOf(index);
        if (result === -1) {
          this.spanIndex.push(index);
        } else this.spanIndex.splice(result, 1);
      },
      //点击tr改变背景颜色的方法
      trClick(index) {
        this.currentIndex = index;
      },
      //双击添加歌曲信息的方法
      addSong(index) {
        // this.currentIndex2 = index
        const songContent = {};
        songContent.playId = this.topSongs[index].id;
        songContent.playImg = this.topSongs[index].al.picUrl;
        songContent.playName = this.topSongs[index].name;
        songContent.player = this.topSongs[index].ar[0].name;
        // footer里的组件要是监听到添加了a属性会做出响应
        songContent.a = ''
        this.$store.commit("addSongs", songContent);
      },
      //播放全部的方法
      playAll(){
        this.topSongs.forEach(item => {
          const songContent = {};
          songContent.playId = item.id;
          songContent.playImg = item.al.picUrl;
          songContent.playName = item.name;
          songContent.player = item.ar[0].name;
          this.songlist.push(songContent)
        })
        //发送播放全部事件给footer,告诉他改变下面的播放状态
        this.$bus.emit('playAll')
        //将歌曲列表保存到vuex
        this.$store.commit('playAll', this.songlist)
      },

      //获取歌手热门50曲的函数
      getSingerTopSongs(id){
        home.getSingerTopSongs(id).then(res => {
          this.topSongs = res.data.songs
        })
      },

      //获取歌手专辑的函数
      getSingerAlbum(id){
        home.getSingerAlbum(id).then(res => {
          this.albums = res.data.hotAlbums
        })
      },
    },
  }
</script>

<style scoped>
  .album{
    padding: 15px 10px 20px 10px;
  }

  table {
    font-size: 13px;
  }
  table tr:nth-child(odd) {
    background-color: #f9f9f9;
  }
  tr td {
    display: inline-block;
    line-height: 33px;
    color: #2a2727;
    white-space: nowrap; /*超出的空白区域不换行*/
    overflow: hidden; /*超出隐藏*/
    text-overflow: ellipsis; /*文本超出显示省略号*/
  }
  table tr:hover {
    background-color: #f0f1f2;
  }
  .title-info td {
    font-size: 14px;
    color: #959090;
  }
  .other {
    width: 100px;
    color: #959090;
    padding-left: 8px;
  }
  .other img {
    position: relative;
    top: 5px;
    width: 18px;
    height: 18px;
    cursor: pointer;
    margin-left: 6px;
  }
  .detail-info td{
    color: #8b7d7d;
  }
  .detail-info .title{
    color: #363333;
  }
  .title {
    width: 600px;
    white-space: nowrap; /*超出的空白区域不换行*/
    overflow: hidden; /*超出隐藏*/
    text-overflow: ellipsis; /*文本超出显示省略号*/
  }
  .time {
    width: 100px;
  }
  /*此处用个id选择器，因为有可能因为权重问题让这个样式被覆盖*/
  #table .active {
    background-color: #e5e5e5;
  }
  #table .dbActive{
    color: #f14465;
  }
  .album-title span:nth-child(1){
    color: #2a2727;
    line-height: 35px;
    font-weight: 700;
  }
  .album-title span:nth-child(2){
    margin-left: 20px;
    padding: 3px 10px;
    font-size: 14px;
    line-height: 35px;
    border-radius: 15px;
    background-color: #d6d6ec;
    cursor: pointer;
    border: 1px solid #a9a9bb;
    transition: .3s;
  }
  .album-title span:nth-child(2):hover{
    color: #e4e4f5;
    background-color: #aaa3a3;
  }
  .hot_box{
    display: flex;
    justify-content: space-between;
  }
  .hot_box .img-box img{
    width: 200px;
    height: 200px;
  }
</style>
